import React, { Component } from 'react';
import './header.css'
import { Modal} from 'antd';
import storage from '../../utils/storage';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import memory from '../../utils/memory';

const { confirm } = Modal;

class Header extends Component {
    constructor(props) {
        super();
        this.state = {
            time:{}, //时间定时器
            nowTime: new Date().toLocaleString(),
        }
    }
    getTime = () => {
        this.state.time = setInterval(() => {
            const newTime = new Date().toLocaleString();
            this.setState({
                nowTime: newTime
            })
        }, 1000);
    }
    componentDidMount = () => {
        this.getTime(); //开启时间的定时器
    }
    componentWillUnmount(){
        clearInterval(this.state.time); //清除时间的定时器
    }
    showConfirm = () => {
        confirm({
          title: '您真的要退出吗?',
          icon: <ExclamationCircleOutlined />,
          okText:'确认',
          cancelText:'取消',
          onOk() {
            storage.delUser(); // 删除ls中的user
            memory.user = {}; // 删除内存中的user
            window.location.reload();
          }
        });
      }
    render() {
        const { nowTime } = this.state;
        const user = memory.user.username;
        return (
            <div className='header'>
                <div className='header-top'>
                    <p>欢迎你，{user} <a style={{ fontSize: 12 }} onClick={this.showConfirm}>[ &nbsp;退出&nbsp; ]</a> </p>
                </div>
                <div className='header-bottom'>
                    <p>{nowTime}</p>
                </div>
            </div>
        );
    }
}

export default Header;